// ------------ code notation highlighting ------------
// matches `<span class="line xxxx" ></span>`
// highlight lines and notation highlight
// `!code highlight` and `!code hl` are the same:
// - `// [\!code highlight]`
// - `// [\!code hl]`
// - `// [\!code highlight:3]`
// - `// [\!code hl:3]`

div[class*='language-'] .line.highlighted {
  display: inline-block;

  width: 100%;
  margin: 0 calc(-1 * var(--code-padding-x));
  padding: 0 var(--code-padding-x);

  background-color: var(--code-c-highlight-bg);

  transition: background-color var(--vp-t-color);
}
